<template>
    <Row class="stream-info-container">
        <Col :span="12" justify="start" align="center">
            <TKText v-if="showNickName" color="#FFF">{{ nickName }}</TKText>
            <div v-show="!isMuted && volume">
                <Icon :size="24" :src="MicOnH5"></Icon>
            </div>
            <div v-show="isMuted">
                <Icon :size="24" :src="MicOffH5"></Icon>
            </div>
        </Col>
        <Col :span="12" justify="end">
            <Button
                v-if="false"
                shape="circle"
                color="rgba(34, 38, 46, 0.7)"
                width="24px"
                height="24px"
                :iconSize="15"
                :iconSrc="SwitchCameraSrc"
                @click.capture.stop="handleClick"
            />
        </Col>
    </Row>
</template>

<script lang="ts">
export default {
    options: {
        virtualHost: true
    }
}
</script>

<script setup lang="ts">
import { StreamInfoProps } from './StreamInfo'
import Row from '../../base/Layout/Row/Row.vue'
import Col from '../../base/Layout/Col/Col.vue'
import Icon from '../../base/Icon/Icon.vue'
import Button from '../../base/Button/Button.vue'
import TKText from '../../base/TKText/TKText.vue'
import { TUICallKitServer } from '../../../../TUICallService'
const MicOnH5 =
    'https://pandauke.oss-cn-guangzhou.aliyuncs.com/static/img/assets/streamInfo/mobile/mic-on-h5.svg'
const MicOffH5 =
    'https://pandauke.oss-cn-guangzhou.aliyuncs.com/static/img/assets/streamInfo/mobile/mic-off-h5.svg'
const SwitchCameraSrc =
    'https://pandauke.oss-cn-guangzhou.aliyuncs.com/static/img/assets/button/mobile/switch-camera.svg'

defineProps(StreamInfoProps)

const handleClick = async () => {
    await TUICallKitServer.switchCamera()
}
</script>

<style lang="scss" scoped>
.stream-info-container {
    padding: 2px 5px;
}
</style>
